<template>
  <div class="gantt-container">
    <div id="gantt"></div>
  </div>
</template>
<script>
import { project } from "@/assets/json/GanttZSData";
import { gantt } from "../../../static/gantt/codebase/dhtmlxgantt";
export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {
    // gantt.i18n.setLocale("zh-CN");
    gantt.config.row_height = 24;
    gantt.config.date_format = "%Y-%m-%d %H:%i";
    gantt.attachEvent("onParse", function() {
      gantt.eachTask(function(task) {
        if (gantt.hasChild(task.id)) {
          task.type = gantt.config.types.project;
          gantt.updateTask(task.id);
        } else if (task.duration === 0) {
          task.type = gantt.config.types.milestone;
          gantt.updateTask(task.id);
        }
      });
    });
    // gantt.config.static_background = true;
    gantt.init("gantt");
    gantt.i18n.setLocale("cn");
    gantt.i18n.setLocale({
      labels: {
        icon_save: "保存111",
        icon_cancel: "取消",
        icon_details: "删除",
        gantt_save_btn: "保存",
        gantt_cancel_btn: "取消",
        gantt_delete_btn: "删除"
      }
    });

    console.log(project, JSON.parse(project), "123");
    let data = JSON.parse(project);
    gantt.clearAll();
    gantt.config.duration_unit = data.config.duration_unit;
    gantt.parse(data.data);
    // gantt.parse({
    //   data: [
    //     { id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, progress: 0.4, open: true },
    //     { id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6, parent: 1 },
    //     { id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, progress: 0.6, parent: 1 }
    //   ],
    //   links: [
    //     { id: 1, source: 1, target: 2, type: "1" },
    //     { id: 2, source: 2, target: 3, type: "0" }
    //   ]
    // });
  }
};
</script>
<style scoped lang="scss">
.gantt-container {
  width: 100vw;
  height: 800px;
  #gantt {
    width: 100%;
    height: 100%;
  }
}
</style>
